<template>
  <view class="page">
    <view class="container">
      <view class="tip">完善用户信息</view>
      <view class="desc">(请完善您的头像与昵称)</view>
      <view class="main">
        <view class="get">点击获取头像</view>
        <button v-if="!avatarUrl" class="avatar-wrapper not" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <image class="avatar" :src="avatarUrl"></image>
        </button>
        <button v-else class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <image class="avatar" :src="avatarUrl"></image>
        </button>
      </view>
      <input type="nickname" class="nickname" placeholder="请填写昵称" @change="changeNickname"/>
      <!--<button @click="save" class="btn">保 存</button>-->
      <!--<view class="cancel" @click="onCancel">取消</view>-->
      <view class="btn">
        <u-button :color="activeColor" text="保 存" @click="save"></u-button>
        <u-button text="取 消" @click="onCancel"></u-button>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>

</template>

<script>
import color from '@/config/color.js'
import User from '../../api/user'
import base64 from '../../util/base64'

const userModel = new User()
export default {
  data() {
    return {
      avatarUrl: '',
      nickname: '',
      base64Image: '',
      activeColor: color.main_color
    }
  },
  methods: {
    onCancel() {
      wx.switchTab({
        url: '/pages/center/index'
      })
    },
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail
      this.avatarUrl = avatarUrl
      const x = 'data:image/jpeg;base64,' + uni.getFileSystemManager().readFileSync(avatarUrl,'base64')
      console.log('av', x)
      this.base64Image = x
    },
    save() {
      userModel.changeAvatar({
        avatarUrl: this.avatarUrl,
        nickname: this.nickname,
        base64Image: this.base64Image,
        av: 0
      }).then(() => {
        this.$refs.uToast.show({
          message: '操作成功~'
        })
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/center/index'
          }, 500)
        })
      })
    },
    changeNickname(e) {
      // console.log(e)
      this.nickname = e.detail.value
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  height: 1vh;
  background: #f3f5f7;
  height: 1000px;
}
.container {
  padding: 10px;
  font-size: 24rpx;
  height: 430px;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  z-index: 1;
  bottom: -10px;
  left: 10rpx;
  right: 10rpx;
  border-radius: 10rpx;
}
.tip, .desc {
  line-height: 20px;
  letter-spacing: 3rpx;
}
.tip {
  font-size: 26rpx;
  font-weight: 700;
}
.main {
  margin: 10px 0;
  display: flex;
  justify-content: start;
  position: relative;
  border: 1rpx solid $main_color;
  button, image {
    width: 200rpx;
    height: 200rpx;
    &.not {
      opacity: 0 !important;
      border: 1rpx solid $main_color;
    }
  }
  button {
    margin: 0 !important;
    line-height: 1 !important;
    padding: 0 !important;
    background: white !important;
  }
  .get {
    position: absolute;
    width: 200rpx;
    height: 200rpx;
    line-height: 200rpx;
    text-align: center;
    color: #ccc;
    left: 0;
    bottom: 0;
  }
}
.nickname {
  border: 1rpx solid $main_color;
  height: 30px;
  line-height: 30px;
  width: 200rpx;
  //border-radius: 10rpx;
  padding: 0 10px;
  box-sizing: border-box;
}
.btn {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  width: 200rpx;
  height: 90px;
  justify-content: space-between;
}
//.container {
//  padding: 20rpx;
//  background: white;
//  display: flex;
//  flex-direction: column;
//  justify-content: center;
//  align-items: center;
//}
//
//.desc {
//  margin-bottom: 100rpx;
//  color: #666;
//  font-size: 28rpx;
//  margin-top: 10px;
//}
//
//.main {
//}
//.avatar-wrapper {
//
//}
//.avatar-wrapper image {
//  width: 200rpx;
//  height: 200rpx;
//  margin: 20rpx auto;
//}
//
//input {
//  margin: 30rpx 0;
//  width: 368rpx;
//}
//
//.btn {
//  width: 368rpx;
//  margin-top: 50rpx;
//  background: var(--mainColor);
//  color: white;
//}
//
//.tip {
//  /*height: 100rpx;*/
//  /*line-height: 100rpx;*/
//  color: $second_color;
//  font-size: 32rpx;
//  //font-weight: 700;
//  letter-spacing: 5rpx;
//  /*margin-bottom: 50rpx;*/
//}
//
///*========*/
////.avatar-wrapper, .weui-input {
////  border: 1rpx solid #ccc;
////}
//
////.weui-input {
////  height: 70rpx;
////  line-height: 70rpx;
////  border-radius: 10rpx;
////  margin: 30rpx 100rpx;
////}
////
////.cancel {
////  margin-top: 30rpx;
////  color: #333;
////}

</style>
